<template>
  <div class="pro-query">
    <a-form :model="formState" :labelCol="{span: 6}" v-bind="$attrs">
      <a-row class="pro-query-row">
        <a-col :span="param.span || 8" :key="index" v-for="(param, index) in searchParam"
               v-show="!param.hidden || !hidden">
          <a-form-item :label="param.label" class="mb-0 mt-15">
            <!-- 输入框 -->
            <a-input v-model:value="formState[param.key]"
                     v-show="!param.hidden || !hidden"
                     v-if="param.type === 'input'"
                     :placeholder="param.placeholder"
                     type="text"
            >
            </a-input>

            <!-- 范围时间 -->
            <a-range-picker v-model:value="formState[param.key]"
                            v-show="!param.hidden || !hidden"
                            v-if="param.type === 'rangeTime'"
                            :show-time="param.showTime?param.showTime:{format: ''}"
                            :format="param.format?param.format:'YYYY-MM-DD'"
                            :valueFormat="param.valueFormat?param.valueFormat:'YYYY-MM-DD'"
                            :placeholder="param.placeholder?param.placeholder:['开始日期', '结束日期']"
                            @change="onChange"
                            style="width:100%">
            </a-range-picker>

            <!-- 选择框 -->
            <a-select v-if="param.type === 'select'"
                      :placeholder="param.placeholder"
                      v-model:value="formState[param.key]"
                      class="pro-query-select"
            >
              <a-select-option :key="index" v-for="(option,index) in param.options" :value="option.value">
                {{ option.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="mt-15" :span="24">
          <!-- 按钮组 -->
          <a-form-item class="w-100p display-block box-hor-end mb-0">
            <div class="box-hor-end">
              <a-button type="primary" class="pro-query-button" @click="search">查询</a-button>
              <a-button html-type="submit" class="pro-query-button" @click="reset">重置</a-button>
              <!-- 收起 隐藏 -->
              <a class="pro-query-hidden" @click="hiddenHandle" v-show="hidden && more">展开<DownOutlined/>
              </a>
              <a class="pro-query-hidden" @click="hiddenHandle" v-show="!hidden && more">收起<UpOutlined/>
              </a>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import "./index.less";
import { defineComponent, reactive, ref } from "vue";
import { DownOutlined , UpOutlined } from "@ant-design/icons-vue"
import { useForm } from "@ant-design-vue/use";

export default defineComponent({
  name: "pro-query",
  props: {
    searchParam: {
      type: Array,
    }
  },
  components: {
      DownOutlined,
      UpOutlined
  },
  emits: [
    'on-search',
    'on-reset'
  ],
  setup(props, {emit}) {

    const hidden = ref(true);
    const more = ref(false);

    const formState = reactive({})
    const formRules = reactive({})

    const generateFormState = array => {
      array.length > 0 && array.forEach(it => {
        const {key, rules = [], value} = it
        formState[key] = value == undefined ? "":value
        formRules[key] = rules
      })
    }

    generateFormState(props.searchParam);

    const {validate, resetFields} = useForm(formState, formRules)

    /// 是否存在隐藏表单
    props.searchParam.forEach(element => {
        if(element.hidden){
           return more.value = true;
        }
    });

    /// 更多操作
    const hiddenHandle = function() {
      hidden.value = !hidden.value;
    }

    /// 表单查询
    const search = async function(){
      var o = await validate();
      emit('on-search',o)
    }

    /// 重置表单
    const reset = function(){
      resetFields();
      emit('on-reset')
    }

    return {
        more: more,
        hidden: hidden,
        hiddenHandle: hiddenHandle,

        /// EMIT
        search: search,
        reset: reset,

        /// 状态
        formState,
        formRules
    }
  },
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    },
  }
});
</script>
